<template>
	<view class="root f1 oh">
		<view class="navigation height-100 fd-row jc-sa bgc-fff">
			<label
				v-for="(nav, index) in navigation"
				:key="index"
				:class="[{ active: navIndex === index }, 'fs-30', 'lh-80', 'relative']"
				@click="switchNav(index)"
			>
				{{ nav }}
			</label>
		</view>

		<scroll-view @scrolltolower="getListData" scroll-y class="f1 mt-12 oh">
			<label class="height-20" />
			<block v-for="(order, index) in orders.list" :key="index">
				<navigator
					:url="`/pages/client/OrderDetail?id=${order.id}`"
					:style="{ padding: `20rpx`, margin: `0 20rpx` }"
					class="order br-20 bgc-fff"
					hover-class="none"
				>
					<label class="jc-sb mb-16">
						<text class="fs-24">
							<text class="color-333"> 订单编号： </text>
							<text class="color-999"> {{ order.order_num }} </text>
						</text>
						<text class="color-fa0707 fs-28">
							{{ order.status | statusText }}
						</text>
					</label>
					<view
						v-for="commodity in order.con"
						:key="commodity.id"
						:style="{ borderBottom: `1rpx solid #f5f5f5` }"
						class="fd-row pt-16 pb-16"
					>
						<image
							:style="{ width: `136rpx`, height: `136rpx` }"
							class="bgc-eee br-8"
							:src="commodity.cover_image"
							mode="aspectFill"
						/>
						<view class="ml-30 jc-sa">
							<text class="fs-30">{{ commodity.name }}</text>
							<label class="fs-28">
								<text>
									<text class="color-999">数量：</text>
									<text class="color-333">{{ commodity.num }}</text>
								</text>
								<text class="ml-30">
									<text class="color-999">价格：</text>
									<text class="color-fa0707">¥{{ commodity.price }}</text>
								</text>
							</label>
						</view>
					</view>

					<view class="fd-row ai-center mt-18">
						<text class="fs-24 f1">
							<text class="color-333">下单时间： </text>
							<text class="color-999">{{ order.createtime_text }}</text>
						</text>

						<view class="fd-row ai-center">
							<button
								v-if="!Number(order.status)"
								hover-class="tap-hover"
								class="bgc-f5f5f5 border-none color-666 br-28 fs-24 pl-18 pr-18 lh-2 ml-6 mr-0"
								:plain="true"
								@click.stop="cancelOrder(index)"
							>
								取消订单
							</button>
						</view>
					</view>
				</navigator>
				<label class="height-20" />
			</block>

			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component({
		filters: {
			statusText(status: number) {
				return ["未支付", "已支付", "已取消", "活动中"][status];
			},
		},
	})
	export default class Order extends Vue {
		// component property
		orderStatus: string[] = ["待付款", "活动中", "已完成", "已取消"];
		navIndex: number = -1;
		orders: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";

		public get navigation(): string[] {
			return [" 全部 "].concat(this.orderStatus);
		}

		onLoad({ tab = "-1" }: { tab: string }) {
			this.switchNav(+tab + 1);
		}

		switchNav(index: number) {
			this.navIndex = index;
			this.orders.page = 1;
			this.orders.list = [];

			this.getListData();
		}

		getListData() {
			const { $request, orders } = this;

			if (requestFlag || !orders.page) return;
			(requestFlag = true), (this.loadStatus = "loading");
			const maps = {
				1: 0,
				3: 1,
				4: 2,
				2: 3,
				0: 4,
			};
			$request
				.get("/index/personalList2", {
					type: maps[this.navIndex as 0 | 1 | 2 | 3 | 4],
					page: orders.page,
					size: orders.size,
				})
				.then(({ data }) => {
					orders.list.push(...data.data);
					orders.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = orders.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
		cancelOrder(index: number) {
			const { list } = this.orders;
			this.$request.get("/index/canOrder", { id: list[index].id }).then(({ msg: title }) => {
				list.splice(index, 1);
				uni.showToast({ title });
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.navigation {
		z-index: 9;
		color: #999;
		.active {
			color: #1b1b1b;
			&::after {
				content: "";
				position: absolute;
				width: 80%;
				height: 9rpx;
				background-image: linear-gradient(-90deg, #333, #1b1b1b);
				border-radius: 5rpx;
				bottom: 9rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>